<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax + fromData 单文件上传</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uploadButton").click(function () {
                /**
                 *FormData是H5的一个模拟一个原始的表单格式的数据对象
                 * 下面方式将form表单创建为FormData对象时，注意参数时DOM对象，而非JQuery对象
                 * 具体用法可以查询FormData的使用
                 * */
                var formData = new FormData($("#uploadForm")[0]);
                /**
                 *下面基本都是平时使用$.ajax的写法，只是data的值使用上面的formData对象
                 * contentType：类容类型，默认: "application/x-www-form-urlencoded"),设置为false
                 * processData：数据处理，默认为true,设置为false
                 * */
                $.ajax({
                    url: "/fileServer/singleFileUpload",
                    type: 'POST',
                    data: formData,
                    dataType: "JSON",
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        alert("上传成功：" + JSON.stringify(data))
                    },
                    error: function (data) {
                        console.log(JSON.stringify(data));
                        alert("上传失败：" + JSON.stringify(data));
                    }
                });
            });
        });

    </script>
</head>
<body>

<h3>ajax + fromData 单文件上传</h3>
<!--文件上传时method必须是post,enctype必须是multipart/form-data-->
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" style="font-size: 20px"/><br>
    <input type="button" id="uploadButton" value="上传" style="font-size: 20px">
</form>

</body>
</html>